import React, { PureComponent, Fragment } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {
    Table,
    Divider,
    Form,
    Card,
    Button,
    Modal,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './StructureMaintenance.less';

const confirm = Modal.confirm;


@connect(({ system }) => ({
    system,
}))
@Form.create()
export default class StructureMaintenance extends PureComponent {

    state = {
        modalVisible: false,
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/getBranchTreeList',
        });
    }

    handleEditStucture = (id, stateStructure) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/getStructureId',
            payload: {
                id,
                stateStructure,
            }
        }) 
        dispatch({
            type: 'system/setSystemBranchIdValue',
            payload: {
                id: id,
            },
        })
        dispatch(routerRedux.push(`/system/system-form?id=${id}&stateStructure=${stateStructure}`));
    }

    handleAddStucture = (stateStructure) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/getStructureId',
            payload: {
                stateStructure,
            }
        })
        dispatch(routerRedux.push(`/system/system-form?stateStructure=${stateStructure}`));
    }

    handleEditOK = () => {
        this.setState({
            modalVisible: false
        })
    }

    handleEditCancel = () => {
        this.setState({
            modalVisible: false
        })
    }

    handleDelateCustomer = (id) => {
        const { dispatch } = this.props;
        confirm({
            title: '你确定要删除这条数据吗?',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type: 'system/deleteStructure',
                    payload: {
                        branchId: id,
                    },
                    callback: () => {
                        dispatch({
                            type: 'system/getBranchTreeList',
                        });
                    },
                });
            },
            onCancel() {

            },
        });
    }

    columns = [
        { title: '组织名称', dataIndex: 'orgName', key: 'orgName' },
        { title: '组织编码', dataIndex: 'orgCode', key: 'orgCode' },
        { title: '备注', dataIndex: 'remark', key: 'remark' },
        {
            title: '操作', dataIndex: '', key: 'x', render: (text, record) => (
                <Fragment>
                    {record.orgLevel == 1 ? null :
                        <div><a onClick={() => this.handleEditStucture(record.id, 6)}>编辑</a>
                            <Divider type="vertical" />
                            <a onClick={() => this.handleDelateCustomer(record.id)}>删除</a>
                        </div>
                    }
                </Fragment>
            )
        },
    ];

    render() {
        const { system: {allBranchTreeList, branchTreeList, streuctureLoading } } = this.props;

        return (
            <PageHeaderLayout title="组织架构维护">
                {
                    // JSON.stringify(allBranchTreeList)
                }
                <Card bordered={false}>
                    <div className={styles.tableList}>

                        <div className={styles.tableListOperator}>
                            <Button icon="plus" type='primary' onClick={() => this.handleAddStucture(7)}
                            >添加组织
                            </Button>
                        </div>
                        <Table
                            columns={this.columns}
                            dataSource={allBranchTreeList}
                            rowKey="id"
                            loading={streuctureLoading}
                        >
                        </Table>
                    </div>
                </Card>

            </PageHeaderLayout>
        );
    }

}
